<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/UploadImg.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
        .jiaoyan{
        	width: 6.8rem;
        	height: .6rem;
        	margin-left: 0.2rem;
        	padding-left: .2rem;
        }
        .loading {
    		position: fixed;
    		background: #F4BC56;
    		padding-top: 60%;
    		width: 100%;
    		height: 100%;
    		opacity: 0.6;
    		text-align: center;
    		z-index: 1000;
    		display: none;
    	}
    </style>


</head>
<body style="background-color: #f4f9fd;">
	<div id="loading" class="loading">
		<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>
	</div>
<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">操作任务</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->


<!--Shop name begin-->
<article class="shop-name height-padding">
    <p>店铺名称</p>
</article>
<!--shop name end -->


<!--Merchant merchandise begin-->
<article class="merchant-merchandise ">
    <div class="businessId">目标商品</div>
    <main>
        <div><img id="goods1Pic" src="images/img_commodity.png"></div>
        <aside>
            <div id="goodsName">商品名称</div>
            <div>搜索展示价格：<span id="phonePrice1">79元</span></div>
            <div>商品成交价格：<span id="phonePrice2">79元</span></div>
            <div>件数：<span id="goods1ItemNum1">1件</span></div>
        </aside>
    </main>
</article>
<!--Merchant merchandise end-->


<!--Task points begin-->
<article class="task-points">
    <p>任务要点</p>
</article>
<!--Task points end-->

<!--task-points-content begin-->
<article class="task-points-content">
    <div>
        <p>任务类型</p>
        <p id="hpType">213131</p>
    </div>
    <div>
        <p>评价要求</p>
        <p>淘宝账号</p>
    </div>
    <div>
        <p>搜索关键词</p>
        <p id="keyword">关键词</p>
    </div>
    <div>
        <aside>
            <a id="copy" href="#">复制关键词并打开淘宝</a>
        </aside>
    </div>
    <div>
        <p>购买数量</p>
        <p id="goods1ItemNum1">目标商品1件</p>
    </div>
    <div>
        <p>排序方式</p>
        <p id="sortMethod">综合排序</p>
    </div>
    <div>
        <p>所在地区</p>
        <p id="goodsAddr">全国</p>
    </div>
    <div>
        <p>价格区间</p>
        <p id="jiagequjian">无需筛选价格</p>
    </div>
    <div>
        <p>订单留言</p>
        <p id="orderMsg"></p>
    </div>
</article>
<!--task-points-content end-->

<!--Task points begin-->
<article class="task-points">
    <p>专属任务要点</p>
</article>
<!--Task points end-->

<article class="task-points-content">
    <div>
        <p>等级限制</p>
        <p id="levelLimit">(*)</p>
    </div>
</article>

<!--Task points begin-->
<article class="task-points">
    <p>商家要求(长按课选择-复制)</p>
</article>
<!--Task points end-->

<article class="task-points-content">
    <div>
        <p id="remarkInfo">无</p>
    </div>
</article>


<!--Task points begin-->
<article class="task-points">
    <p>注意事项</p>
</article>
<!--Task points end-->

<article class="task-points-content">
    <div class="matters-needing-attention-div">
        <p class="matters-needing-attention">与商家聊天过程中切记不要出现任何“任务，做单，刷单”等词 汇， 要按照正常购物流程和语气进行操作</p>
    </div>
</article>


<!--The goods are compared to the three begin-->
<form action="" method="post" id="frombyfrist" >
<article class="goods-compared-three">
    <section>货比三家</section>
    <section>
        <p>1.请确认使用已绑定的账号登录淘宝</p>
        <p>2.点击搜索框粘贴制定的关键词</p>
        <p>3.按要求设置筛选价格区间、所在地、类目等搜索条件缩小查询范围，对搜索结果页面截一张图</p>
        <p>4.一次点开列表中的任意2个商品，分别截图，商品浏览要慢慢滑动到详细底部</p>
    </section>
	<section>
	        <ul>
	            <li>
	                <p>搜索结果页</p>
	                <p>
	                    <div class="fileBtn">
	                        <p id="imgBtnp">+</p>
	                        <!--<input id="fileBtn" name="files" type="file" onchange="upload();" accept="image/*" capture="camera" multiple="multiple"/>-->
	                        <!--单张图片容器-->
	                        <input id="fileBtn" type="file" name="files" onchange="upload();" accept="image/*" multiple="multiple"/>
	                        <img src="" id="img"/>
	                    </div>
	                </p>
	            </li>
	            <li>
	                <p>任意商品1&nbsp;&nbsp;&nbsp;</p>
	                <p>
	                    <div class="fileBtn">
	                        <p id="imgBtnp1">+</p>
	                        <input id="fileBtn1" type="file" name="files" onchange="upload1();" accept="image/*" multiple="multiple"/>
	                        <img src="" id="img1"/>
	                    </div>
	                </p>
	            </li>
	            <li>
	                <p>任意商品2&nbsp;&nbsp;&nbsp;</p>
	                <p>
	                    <div class="fileBtn">
	                        <p id="imgBtnp2">+</p>
	                        <input id="fileBtn2" type="file" name="files" onchange="upload2();" accept="image/*" multiple="multiple"/>
	                        <img src="" id="img2"/>
	                    </div>
	                </p>
	            </li>
	        </ul>
	        <!--click update img-->
	        <aside id="uploadBtn" style="width: 7.1rem;
			height: 0.75rem;
			background-color: #1e81d2;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			border-radius: 0.1rem;" >
			<!--<button style="width: 7.1rem;
			height: 0.75rem;
			background-color: #1e81d2;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			border-radius: 0.1rem; font-size: 0.26rem;" id="summitBut">选图后点击这里上传</button>-->
	            <a id="summitBut" class="summitBut11">选图后点击这里上传</a>
	        </aside>
	    </section>
</article>
</form>
<!--The goods are compared to the three end-->

<!--Modify shop name begin-->
<article class="modify-shop-name">
    <section><p>店铺名：</p><span id="shopNameall">**封底家纺工****</span></section>
   	<input type="text" class="jiaoyan" id="shopName" value="2222"/>
   		
    <section>
        <aside>  
			<button class="wahaha">补全后点我核对</button>
 </aside>
    </section>
</article>
<!--Modify shop name end-->

<!--Next step begin -->
<article class="next-step">
    <section>
        <p>找到目标店铺后，将店铺中空缺的部分补全，一个输入框填写 一个字符。</p>
        <p>如有问题，请联系客服微信，备注-店铺核对问题-（微信号在 首页）</p>
        <p>由于部分商铺名称相似，请仔细核对，确保下单的店铺名和要 求的完全一致才能操作。</p>
        <p>拍错店铺需自行承担损失</p>
        <p>(旗舰店≠专营店≠专卖店≠XX店)</p>
    </section>
    <section id="nextGo">
        <aside>
            <a id="nextStep">下一步</a>
        </aside>
    </section>
</article>
<!--Next step end-->

<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/UploadImg.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/config.js"></script>
<script src="js/vconsole.min.js"></script>
<script src="js/loading.js"></script>
<script>
	var orderId
	var shopName
	var uploadTag = 0 // 是否已上传货比三家图片
	var shopNameTag = 0 // 是否店铺名正确
	var copy
	$(function(){
		orderId = getUrlParam('orderId')
		console.log("当前操作任务id：" + orderId)
		$.ajax({
			url:$CONFIG.baseUrl+"/api/order/getOrderById",
			type: 'get',
			data:{orderId:orderId},
			beforeSend:function(x){
				x.setRequestHeader("Authorization",localStorage.getItem('token'));
			},
			success: function(data){
				console.log(JSON.stringify(data))
				if(data.data.searchResultPic != null &&data.data.searchResultPic != "" && data.data.anyGoodsPic1 != null && data.data.anyGoodsPic1!="" &&data.data.anyGoodsPic2!=null && data.data.anyGoodsPic2 != ""){
					$("#uploadBtn").hide();
					uploadTag = 1// 已上传货比三家图片
				}else{
					$("#nextGo").attr("disabled",true).css("background-color","#D3D3D3")
				}
				// 商品图片
				$('#goods1Pic')[0].src = $IMG_CONF+data.data.goods1Pic
				$("#goodsName").text(data.data.goodsName);
				$("#phonePrice1").text(data.data.phonePrice+"元");
				$("#phonePrice2").text(data.data.goods1RealPrice+"元");
				$("#goods1ItemNum1").text(data.data.goods1ItemNum+"件");
				$("#hpType").text(function(){
					if(data.data.hpType == 1)return "普通好评";
        			if(data.data.hpType == 2)return "文字好评";
        			if(data.data.hpType == 3)return "图片好评";
        			if(data.data.hpType == 4)return "视频好评";
				});//
				$("#keyword").text(data.data.keyword);
				copy = data.data.keyword
				$("#sortMethod").text(data.data.sortMethod);
				$("#goodsAddr").text(data.data.goodsAddr);
				// 价格区间
				if (data.data.priceMin != null || data.data.priceMax != null) {
					if (data.data.priceMin != null && data.data.priceMax != null) {
						$("#jiagequjian").text(data.data.priceMin + " - " + data.data.priceMax)
					} else if (data.data.priceMin != null) {
						$("#jiagequjian").text("最低价：" + data.data.priceMin)
					} else {
						$("#jiagequjian").text("最高价：" + data.data.priceMax)
					}
				}
				$("#levelLimit").text(data.data.levelLimit?"是":"否");
				$("#orderMsg").text(data.data.orderMsg);
				$("#remarkInfo").text(data.data.remarkInfo);
				$("#shopName").val(function(){
					return data.data.shopName.substring(0,parseInt(data.data.shopName.length/2))
				})
				shopName = data.data.shopName
				$("#shopNameall").text(function(){
					var m = data.data.shopName.length;
					var x = ""
					for(var i = 0;i<(m-m/2);i++){
						x+="*";
					}
					return data.data.shopName.substring(0,parseInt(data.data.shopName.length/2))+x;
				});
				if (data.data.searchResultPic != null) {
					$("#img").attr("src",function(){
						$("#imgBtnp").text("");
						$("#img")[0].style.display = "block";
						return $IMG_CONF+data.data.searchResultPic
					})
				}
				if (data.data.anyGoodsPic1 != null) {
					$("#img1").attr("src",function(){
						$("#imgBtnp1").text("");
						$("#img1")[0].style.display = "block";
						return $IMG_CONF+data.data.anyGoodsPic1
					})
				}
				if (data.data.anyGoodsPic2 != null) {
					$("#img2").attr("src",function(){
						$("#imgBtnp2").text("");
						$("#img2")[0].style.display = "block";
						return $IMG_CONF+data.data.anyGoodsPic2
					})
				}
			},
			errror: function(error){
				console.log('error')
			}
		})
	})
	$("#shopName").blur(function(){
		if($("#shopName").val() == shopName){
			$(".wahaha").attr("distable","false")
			$(".wahaha").css("backgroundColor","#1e81d2")
			shopNameTag = 1
		}else{
			$(".wahaha").attr("distable","distable")
			$(".wahaha").css("backgroundColor","#d3d3d3")
			shopNameTag = 0
		}
	});
	
	$(".wahaha").click(function(){
		if($("#shopName").val() == shopName){
			$(".wahaha").attr("distable","false");
			$(".wahaha").css("backgroundColor","#1e81d2");
			shopNameTag = 1
			plus.nativeUI.toast('店铺名核对正确')
		}else{
			$(".wahaha").attr("distable","distable");
			$(".wahaha").css("backgroundColor","#d3d3d3");
			shopNameTag = 0
			plus.nativeUI.toast('店铺名核对错误')
		}
	});
	
	$("#summitBut").click(function(){
		loadingOpen()
		console.log("上传货比三家图片...")
		var form = document.getElementById("frombyfrist");
		var formdata = new FormData(form);
		formdata.append("orderId", orderId);
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/comparisonPic",
			type: 'post',
			data: formdata,
			contentType:false,
			processData:false,
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'));
			},
			success: function(data){
				console.log("OK")
				if (data.code == 200) {
					uploadTag = 1;
					$("#nextGo").attr("disabled",true).removeAttr("style");
				}
				plus.nativeUI.toast(data.msg)
				loadingClose()
			},
			error: function(error){
				console.log('error')
				loadingClose()
			}
		})
	})
	
	$("#nextGo").click(function(){
		if (uploadTag == 0 ) {
			plus.nativeUI.toast("请上传货比三家图片。")
			return; // 未上传货比三家图片
		}		
		if (shopNameTag == 0) {
			plus.nativeUI.toast("请核对并补全正确的店铺名。")
			return; // 
		}
		console.log("next operation " + orderId)
		console.log(orderId)
		window.location.replace("operationTaskNextStep_advancePayment.html?orderId=" + orderId)
	})

	$("#copy").click(function(){
		copyKeyword()
	})
	function copyKeyword() {
		if(mui.os.ios){
			//ios
			var UIPasteboard = plus.ios.importClass("UIPasteboard");
		    var generalPasteboard = UIPasteboard.generalPasteboard();
		    //设置/获取文本内容:
		    generalPasteboard.plusCallMethod({
		        setValue:copy,
		        forPasteboardType: "public.utf8-plain-text"
		    });
		    generalPasteboard.plusCallMethod({
		        valueForPasteboardType: "public.utf8-plain-text"
		    });
		    mui.toast("已成功复制到剪贴板");
		}else{
			//安卓
			var context = plus.android.importClass("android.content.Context");
			var main = plus.android.runtimeMainActivity();
			var clip = main.getSystemService(context.CLIPBOARD_SERVICE);
			plus.android.invoke(clip,"setText",copy);
			mui.toast("已成功复制到剪贴板");
		}
		if (window.plus) {
			plus.runtime.openURL("taobao://taobao.com/");
		}
	}
</script>

</body>
</html>